<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <title>下拉菜单</title>
    <style>
    
    section{
        background-image: url(bg.png);
        width: 950px;
        margin: 0 auto;
        text-align: center;
        border-radius: 5px;
        /*background-size: 100% 800%;
        background-position: 0 -300%;*/
        position: relative;
    }
     section div{
         
         display: inline-block;
         margin: 0;
         color: white;
         width: 110px;
         height: 35px;
         line-height: 35px;
         font-size: 14px;
         font-weight: bold;
         cursor: pointer;
         background-image: url(bg.png);
         background-size: 100% 800%;
         background-position: 0 -300%;
     }
     section div:nth-of-type(1){
        background-position: 0 0;
     }
     span{
         display: block;
         position: absolute;
     }
    </style>
</head>
<body>
    <section>
        <div>站长之家</div>
        <div>行业资讯</div>
        <div>站长在线</div>
        <div>网站运营</div>
        <div>设计在线</div>
        <div>网络编程</div>
        <div>联盟资讯</div>
        <div>服务器</div>
        <span></span>
    </section>
    
    
    
</body>
</html>
<script>
    
    var divs=document.querySelectorAll('div');
    var section=document.querySelector('section');
    var span=document.querySelector('span');

     var arr=[
        '业界动态|收购融资|门户动态|搜索引擎|网络游戏|电子商务',
        '站长报道|好站推荐|站长聚会|站长访问|站长茶馆|网站排名',
        '建站经验|策划盈利|搜索优化|网站推广|免费资源|网站排名',
        '酷站推荐|网页设计|WEB标准|视频处理|设计活动|网站排名',
        'ASP编程|Php编程|.Net编程|Xml编程|Access Mssql|Mysql',
        '联盟动态|联盟介绍|联盟点评|网赚技巧|网站推广|免费资源',
        'Web服务器|Ftp服务器|Mail服务器|Win服务器|Linux服务器|免费资源'
    ];  

    for(var i=0;i<divs.length;i++){
        
        divs[i].index=i;
        divs[i].onmouseover=function(){
            divs[this.index].style.backgroundPosition='0 -400%';
            

        }
        divs[i].onmouseout=function(){
            divs[this.index].style.backgroundPosition='0 -300%';
            divs[0].style.backgroundPosition='0 0';
        }
    }

    for(var i=1;i<divs.length;i++){
        
        divs[i].index=i;
        divs[i].onmouseover=function(){
            divs[this.index].style.backgroundPosition='0 -400%';
           span.style.width='300px';
            span.style.height='30px';
            span.style.borderRadius='5px';
            span.style.border='1px solid gray';
            span.style.left= this.offsetWidth*this.index+15+'px';
            
            span.innerHTML=message[this.index];
        }
        divs[i].onmouseout=function(){
            divs[this.index].style.backgroundPosition='0 -300%';
            divs[0].style.backgroundPosition='0 0';
        }
    }

</script>